<template>
  <div>
    <!-- <h1>其他命令</h1>
    <OtherDirective /> -->
    <!-- <h1>待办事项</h1>
    <TodoList /> -->
    <!-- <h1>待办事项</h1>
    <TodoDemo /> -->
    <!-- <h1>留言板(本地存储汪哥)</h1>
    <CommentBase /> -->
    <!-- <h1>留言板(本地存储)</h1>
    <CommentDemo2 /> -->
    <!-- <h1>留言板(汪哥版)</h1>
    <CommentDemo /> -->
    <!-- <h1>留言板</h1>
    <MessageDemo /> -->
    <!-- <h1>侦听器</h1>
    <WatchDemo /> -->
    <!-- <h1>生命周期(钩子函数)</h1>
    <LifeCycleDemo v-if="isShow"/>
    <br><button @click="isShow = !isShow">显隐</button> -->
    <!-- <h1>选项卡(接口版)</h1>
    <TabDemo3 /> -->
    <!-- <h1>选项卡(无接口汪哥版)</h1>
    <TabDemo2 /> -->
    <!-- <h1>选项卡(无接口二桥版)</h1>
    <TabDemo1 /> -->
    <!-- <h1>事件处理</h1>
    <EventDemo /> -->
    <!-- <h1>类与样式绑定</h1>
    <ClassStyle /> -->
    <!-- <h1>计算属性</h1>
    <ComputedDemo /> -->
    <!-- <h1>搜索</h1>
    <SearchDemo /> --
    <!-- <h1>v-model的使用</h1>
    <VmodelDemo /> -->
    <!-- <h1>点名器</h1>
    <RollCaller /> -->
    <!-- <h1>显示隐藏</h1>
    <ShowOrHide /> -->
    <!-- <h1>v-for的使用</h1>
    <VforDemo /> -->
    <!-- <h1>基础指令</h1>
    <DirectiveDemo /> -->
    <!-- <h1>模板语法</h1>
    <TemplateSyntax /> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TemplateSyntax from './components/TemplateSyntax.vue'
import DirectiveDemo from './components/DirectiveDemo.vue'
import VforDemo from './components/VforDemo.vue'
import ShowOrHide from './components/ShowOrHide.vue'
import RollCaller from './components/RollCaller.vue'
import VmodelDemo from './components/VmodelDemo.vue'
import SearchDemo from './components/SearchDemo.vue'
import ComputedDemo from './components/ComputedDemo.vue'
import ClassStyle from './components/ClassStyle.vue'
import EventDemo from './components/EventDemo.vue'
import TabDemo1 from './components/TabDemo1.vue'
import TabDemo2 from './components/TabDemo2.vue'
import TabDemo3 from './components/TabDemo3.vue'
import LifeCycleDemo from './components/LifeCycleDemo.vue'
const isShow = ref(true)
import WatchDemo from './components/WatchDemo.vue'
import MessageDemo from './components/MessageDemo.vue'
import CommentDemo from './components/CommentDemo.vue'
import CommentDemo2 from './components/CommentDemo2.vue'
import CommentBase from './components/CommentBase.vue'
import TodoDemo from './components/TodoDemo.vue'
import TodoList from './components/TodoList.vue'
import OtherDirective from './components/OtherDirective.vue'
</script>